<template>
    <div class="lable">
        <div class="lable f-c-sb">
            <div class="lable f-c-sb">
                <div class="left">
                    <div class="lable-text">{{ title }}</div>
                    <div class="line"></div>
                </div>
                <div class="right f-c-sb">
                    <div class="right-line"></div>
                    <div class="right-text">{{ subTitle }}</div>
                </div>
            </div>

            <div class="view-more" @click="getpush(title)">
                <span>查看更多</span>
            </div>
        </div>
        <div class="img-box">
            <div class="el-row" style="margin-left: 0px; margin-right: -20.5px;">
                <div class="el-col-item" v-for="item in dataList" :key="item.id" @click="skip(item)">
                    <div class="el-image">
                        <img :src="'/api' + item.image" alt="" style="width: 100%;height: 100%;">
                    </div>
                    <div v-if="showTitle" class="button-text">
                        {{ item.title }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'NewsBox',
    props: {
        title: String,
        subTitle: String,
        dataList: Array
    },
    data(){
        return{
            showTitle:true
        }
    },
    mounted(){
        if(this.dataList.length == 3){
            this.showTitle = false
        }
    },
    methods:{
        skip(data){
            if(data.hasOwnProperty('articleClass')){
                if(data.articleClass == null){
                    this.goDetails(data.id,2)
                }else{
                    this.goDetails(data.id,data.articleClass)
                }
            }else{
                this.getpush(data.title)
            }
        },
         // 文章详情跳转
         goDetails(value, art) {
            if (art != 2) {
                this.$router.push({ path: '/NewsDetails', query: { tid: value } })
            } else if (art == 2) {
                this.$router.push({ path: '/ClassVideo', query: { tid: value } })
            }
        },
        // 文章列表跳转
        getpush(value) {
            this.$router.push({ path: '/News', query: { name: value } })
        },
    }
}
</script>

<style lang="less" scoped>

.lable {

    .lable {
        height: 40px;
        padding: 23px 0;

        .left {
            .lable-text {
                height: 24px;
                font-size: 20px;
                font-family: NotoSansHans-Bold;
                font-weight: bold;
                color: #000000;
                margin-bottom: 10px;
            }

            .line {
                height: 4px;
                background: #ba0825;
            }
        }

        .right {
            margin-left: 45px;

            .right-line {
                width: 90px;
                height: 2px;
                margin: auto 0;
                background: #eeeeee;
            }

            .right-text {
                margin-left: 5px;
                font-size: 16px;
                font-family: Noto Sans S Chinese;
                font-weight: 300;
                font-style: italic;
                color: #777777;
                line-height: 40px;
            }

        }

        .view-more {
            width: 65px;
            height: 23px;
            background: #ededed;
            border-radius: 15px;
            font-size: 11px;
            font-family: NotoSansHans-Regular;
            font-weight: 400;
            color: #2A2A2A;
            cursor: pointer;
            text-align: center;
            line-height: 23px;
        }
    }

    .img-box {
        margin: 10px 0;

        .el-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;

            .el-col-item {

                width: 383px;
                height: 254px;

                .el-image {
                    width: 383px;
                    height: 214px;
                    position: relative;
                    display: inline-block;

                    overflow: hidden;
                }

                .button-text {
                    font-size: 18px;
                    font-family: NotoSansHans-Regular;
                    font-weight: 400;
                    color: #000000;
                    line-height: 40px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    line-height: 34px;
                    cursor: pointer;

                }

                .button-text:hover {
                    color: #ff0108;
                }
            }
        }
    }
}
</style>